<template>
  <div class="file-container">
    <div class="file-left">
      <div class="line"></div>
      <div class="items">
        <div :class="['item', {'active':showContentIndex === 'file1'}]" @click="handleItem1" v-if="isShowModule('file1')">
          <div class="icon-img icon-img1"></div>
          合成配音
        </div>
        <div :class="['item', {'active':showContentIndex === 'file2'}]" @click="handleItem2" v-if="isShowModule('file2')">
           <div class="icon-img icon-img2"></div>
           背景音乐
        </div>
        <div :class="['item', {'active':showContentIndex === 'file3'}]" @click="handleItem3" v-if="isShowModule('file3')">
           <div class="icon-img icon-img3"></div>
           景区文本
        </div>
        <div class="line-col"></div>
      </div>
    </div>
    <div class="file-right">
      <div class="line"></div>
      <div class="content">
        <file-contant1 v-if="showContentIndex === 'file1'" :btnShow="btnShow('file1')"></file-contant1>
        <file-contant2 v-else-if="showContentIndex === 'file2'" :btnShow="btnShow('file2')"></file-contant2>
        <file-contant3 v-else :btnShow="btnShow('file3')"></file-contant3>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @import '../../../assets/less/file';
</style>

<script>
import FileContant1 from './file1'
import FileContant2 from './file2'
import FileContant3 from './file3'
export default {
  data () {
    return {
      showContentIndex: 'file1',
      showModules: [
        {
          name: 'file1',
          btns: ['delete', 'download']
        },
        {
          name: 'file2',
          btn: []
        },
        {
          name: 'file3',
          btns: ['search', 'delete']
        }
      ]
    }
  },
  components: {
    FileContant1,
    FileContant2,
    FileContant3
  },
  methods: {
    handleItem1 () {
      this.showContentIndex = 'file1'
      // document.querySelector('.line-col').style.transform = 'translateY(0px)'
    },
    handleItem2 () {
      this.showContentIndex = 'file2'
      // document.querySelector('.line-col').style.transform = 'translateY(210px)'
    },
    handleItem3 () {
      this.showContentIndex = 'file3'
      // document.querySelector('.line-col').style.transform = 'translateY(420px)'
    },
    init () {
      this.showModules = this.$route.meta.children
      this.showContentIndex = this.showModules[0].name
    },
    isShowModule (value) {
      let modules = this.showModules.map(item => {
        return item.name
      })
      return modules.indexOf(value) > -1
    },
    btnShow (value) {
      let btns = this.showModules.find(item => {
        return item.name === value
      })
      if (btns) return btns.btns
    }
  },
  created () {
    this.init()
  }
}
</script>
